<template>
  <div class="content">
    <div class="top">
      <el-input
        v-model="groupname"
        placeholder="小区名称"
        class="ipt"
      ></el-input>
      <el-input
        v-model="unitname"
        placeholder="单元名称"
        class="ipt"
      ></el-input>
      <!-- 日期 -->

      <div class="block">
        <el-date-picker
          style="width: 140px"
          class="day"
          v-model="value2"
          align="right"
          type="date"
          placeholder="建设时间"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>

      <el-select
        v-model="value"
        clearable
        placeholder="选择状态"
        style="width: 10%"
      >
        <el-option
          v-for="item in valueList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="search"
        style="margin-left: 20px"
        class="button1"
      ></el-button>
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="add()"
        class="button2"
        >新增</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        @click="reset"
        class="button3"
        >重置</el-button
      >
    </div>
    <div class="list">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        align="center"
        tooltip-effect="dark"
        :header-cell-style="{
          background: '#eef1f6',
          color: '#1f2d3d',
          'border-color': '#dfe6ec',
        }"
        style="width: 100%; font-size: 14px; color: #1f2d3d"
        v-loading="loading"
      >
        <el-table-column prop="communityname" label="小区名称" align="center">
        </el-table-column>
        <el-table-column
          prop="unitname"
          label="单元名称"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="unitnum" label="栋数" align="center">

        </el-table-column>

        <el-table-column
          prop="createtime"
          label="建设时间"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            {{ getFormattedTime(scope.row.createtime) }}
          </template>
        </el-table-column>

        <el-table-column prop="unitstatus" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.unitstatus == 1">已建成</span>
            <span v-if="scope.row.unitstatus == 2">未建成</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template slot-scope="scope">
            <div
              style="display: flex; margin-left: 13px; justify-content: center"
            >
              <el-button
                :plain="true"
                size="mini"
                style="color: #62a8ea; background-color: #fff; font-size: 12px"
                @click="detail(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                style="
                  font-size: 12px;
                  color: black;
                  background-color: #fff;
                  color: red;
                "
                @click="deleteData(scope.row, scope.$index)"
                type="danger"
                >归档
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next, jumper"
          :page-size="pageSize"
          :current-page="cur_page"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          background
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <add-dialog ref="addDialog"></add-dialog> -->
  </div>
</template>

<script>
import moment from 'moment';
// import addDialog from "./addDialog"
export default {
  name: "userIndex",
  // components:{
  //   addDialog
  // },
  data() {
    return {
      groupname: "",
      unitname: "",
      // 日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value2: "",
      value3 : "",
      nickname: "",
      homeaddress: "",
      context: "",
      dialogTableVisible: false,
      value: "",
      valueList: [
        {
          text: "已建成",
          value: 1,
        },
        {
          text: "未建成",
          value: 2,
        },
      ],
      tableData: [],
      loading: false,
      loaded: false,
      total: 0,
      cur_page: 1,
      pageSize: 10,
      pageNo: 1,
    };
  },

  computed: {
    // 计算属性：格式化时间
    getFormattedTime() {
      return (time) => {
        if (time && typeof time === "string") {
          // 截取前20个字符，并在第20个字符后插入一个空格
          return time.slice(0, 10) + " " + time.slice(11, 19);
        }
        return time || ""; // 如果时间为空或不是字符串，返回原始值或空字符串
      };
    },
  },

  created() {
    if (this.value2) {
      this.value2 = this.trans(this.value2);
    }
    this.getData();
  },
  mounted() {},
  watch: {
    // 监听 value2 的变化
    value2(newVal) {
      this.handleDateChange();
    },
  },
  methods: {
    formatDate(date) {
      if (date) {
        // 将日期转换为 UTC 格式，并去掉时间部分
        return moment(date).utc().add(1, 'days').format('YYYY-MM-DD');
      }
      return '';
    },

    handleDateChange() {
      // 当日期选择器的值发生变化时，格式化日期
      this.value3 = this.formatDate(this.value2);
    },
    //转换日期
    // trans(value) {
    //   if (value) {
    //     return value.split("T")[0];
    //   }
    //   return "";
    // },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
      this.search();
    },
    handleSizeChange(val) {
      this.cur_page = 1;
      this.pageSize = val;
      this.getData();
      this.search();
    },
    // 获取用户表信息
    getData() {
      this.loading = true;
      this.$Axios({
        url: "/house/gethouseList",
        method: "get",
        data: {
          // type: 2,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 查询
    search() {
      this.loading = true;
      this.$axiosToken({
        url: "/house/searchList",
        method: "get",
        data: {
          communityname: this.groupname,
          unitname: this.unitname,
          createDt: this.value3,
          value: this.value,
          pageNum: this.pageSize,
          currPage: this.cur_page,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 新增
    add() {
      this.$router.push({
        path: "/house/add", // 使用完整的嵌套路由路径
      });
    },
    // 重置
    reset() {
      this.getData();
      this.value = "";
      (this.groupname = ""), (this.unitname = ""), (this.value2 = "");
    },
    // 详情
    detail(row) {
      console.log(row.id, "详情");
      this.$router.push({
        path: "/house/detail",
        query: {
          id: row.id,
          // type : DETAIL
        },
      });
    },
    // 删除 v
    deleteData(row, index) {
      console.log(row, "行", index, "index");
      this.$confirm("确定删除该用户？", "提示", {
        type: "warning",
      }).then(() => {
        const u_id = row.id;
        this.$axiosToken({
          url: "/house/delunitList",
          method: "get",
          data: {
            id: u_id,
          },
          success: (result) => {
            this.getData();
            this.$message({
              showClose: true,
              message: "删除用户成功",
              type: "warning",
            });
          },
          error: (error) => {
            this.getData();
            this.$message({
              showClose: true,
              message: "删除用户失败",
              type: "warning",
            });
          },
        });
      });
    },
  },
};
</script>

<style scoped>
.block {
  margin: 0 20px;
}
.block .day {
  width: 50px;
}
.top {
  width: 100%;
  display: flex;
}
.el-input__inner {
  font-size: 14px;
  height: 36px;
}
.el-input:nth-child(1) {
  width: 30%;
  border-radius: 4px;
}
.el-input:nth-child(2) {
  width: 30%;
  margin-left: 10px;
  border-radius: 4px;
}
.el-input:nth-child(3) {
  width: 22%;
  margin-left: 10px;
  border-radius: 4px;
}
.button1,
.button2,
.button3 {
  border-radius: 4px;
  margin-left: 15px;
  color: #fff;
  font-size: 14px;
  width: 9%;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 6px 10px;
}
.el-button--mini,
.el-button--small {
  border-radius: 5px;
}

.list {
  margin-top: 25px;
}
.pagination {
  text-align: right;
  margin: 20px 0;
}
.el-input.el-input--mini.el-input--suffix > .el-input__inner {
  height: 28px;
}
.top .ipt {
  width: 300px;
}
</style>